<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>关联资源</title>
<link rel="stylesheet" href="${basePath}/admin/layui/css/layui.css">
<link rel="stylesheet" href="${basePath}/admin/css/admin.css">
<script type="text/javascript">
	window.token = '${sessionScope.token}';
</script>
</head>
<body>
	<div class="layui-form" id="menusDiv" style="margin-left:50px;margin-top:10px;">
		<input type="checkbox" lay-filter='selectAllMenu' id="selectAll" title="全选" lay-skin="primary"><br>
	</div>
	<!-- <div style="margin-left:50px;margin-top:10px;" id="menusDiv">
		<input type="checkbox" id="selectAll">全选<br>
	</div>  -->
</body>
<script src="${basePath}/admin/layui/layui.all.js"></script>
<script src="${basePath}/admin/js/plugin/jquery-2.2.4.min.js"></script>
<script src="${basePath}/admin/js/plugin/template-web.js"></script>
<script src="${basePath}/admin/js/mylayui.js"></script>
<script type="text/javascript">
$(function(){
	window.basePath = '${basePath}';
	var roleId = $(parent.document.getElementById("selectedRoleId")).val();
	var form = layui.form;
	//点击全选
	form.on('checkbox(selectAllMenu)', function(data){
		var obj = data.elem;//得到checkbox原始DOM对象
		if(data.elem.checked){//是否被选中，true或者false
			//不要使用attr方法 ！！！！！
			$("input[type=checkbox]").prop('checked','checked');
		}else{
			$("input[type=checkbox]").prop('checked',false);
		}
		form.render();
		$("#menusDiv div").css("margin-top","15px");
		//console.log(data.value); //复选框value值，也可以通过data.elem.value得到
		//console.log(data.othis); //得到美化后的DOM对象
	});
	//点击父菜单
	form.on('checkbox(selectParentMenu)', function(data){
		var obj = data.elem;//得到checkbox原始DOM对象
		var objClass = $(obj).attr("class");
		if(data.elem.checked){//是否被选中，true或者false
			//不要使用attr方法 ！！！！！
			$("input[class="+objClass+"]").prop('checked',true);
		}else{
			$("input[class="+objClass+"]").prop('checked',false);
		}
		var flag = isAllSelect();
		if(flag==true){
			$("#selectAll").prop('checked',true);
		}else{
			$("#selectAll").prop('checked',false);
		}
		form.render();
		$("#menusDiv div").css("margin-top","15px");
		//console.log(data.value); //复选框value值，也可以通过data.elem.value得到
		//console.log(data.othis); //得到美化后的DOM对象
	});
	//点击子菜单
	form.on('checkbox(selectSubMenu)', function(data){
		var obj = data.elem;//得到checkbox原始DOM对象
		var objClass = $(obj).attr("class");
		var objArr = $("input[class="+objClass+"]");
		isSubAllSelect(objArr);
		var flag = isAllSubMenuChecked();
		if(flag == true){
			$("#selectAll").prop("checked",true);
		}else{
			$("#selectAll").prop("checked",false);
		}
		form.render();
		$("#menusDiv div").css("margin-top","15px");
		//console.log(data.value); //复选框value值，也可以通过data.elem.value得到
		//console.log(data.othis); //得到美化后的DOM对象
	});
	$.ajax({
		url: window.basePath+ "/sys/getMenusInfo",
		type: "POST",
		headers: {"token" : window.token},
		dataType: 'json',
		data:{roleId:roleId},
		success: function(data) {
			var dataArr = data.data;
			for(var i=0;i<dataArr.length;i++){
				var parentObj = dataArr[i].parent;
				if(parentObj.checked){
					$("#menusDiv").append("<input lay-filter='selectParentMenu' type='checkbox' class='menu"+i+"' id='parentMenu'"+i+" name='menu' title="+parentObj.menuName+" checked>");
				}else{
					$("#menusDiv").append("<input lay-filter='selectParentMenu' type='checkbox' class='menu"+i+"' id='parentMenu'"+i+" name='menu' title="+parentObj.menuName+">");
				}
				$("#menusDiv").append("<br>");
				var subArr = dataArr[i].sub;
				for(var j=0;j<subArr.length;j++){
					var subObj = subArr[j];
					if(subObj.checked){
						$("#menusDiv").append("<input lay-filter='selectSubMenu' type='checkbox' value='"+subObj.menuId+"' class='menu"+i+"' id='subMenu"+i+""+j+"' name='subMenu' title="+subObj.menuName+" lay-skin='primary' checked>");
					}else{
						$("#menusDiv").append("<input lay-filter='selectSubMenu' type='checkbox' value='"+subObj.menuId+"' class='menu"+i+"' id='subMenu"+i+""+j+"' name='subMenu' title="+subObj.menuName+" lay-skin='primary'>");
					}
				}
				$("#menusDiv").append("<br>");
			}
			var allSubMenu = $("input[lay-filter='selectSubMenu']");
			var flag = true;
			for(var i=0;i<allSubMenu.length;i++){
				var obj = allSubMenu[i];
				if($(obj).prop("checked") == false){
					flag = false;
				}
			}
			if(flag == true){
				$("#selectAll").prop("checked",true);
			}
			form.render();
			$("#menusDiv div").css("margin-top","15px");
		},
		error:function(){
			layer.alert("操作失败");
		}
	});
});
function isAllSelect(){
	var objArr = $("input[type=checkbox]");
	for(var i=0;i<objArr.length;i++){
		var obj = objArr[i];
		var objId = $(obj).prop("id");
		if(objId != "selectAll"){
			var isChecked = $(obj).prop("checked");
			if(isChecked!=true){
				return false;
			}
		}else{
			//alert("全选");
		}
	}
	return true;
}
function isSubAllSelect(objArr){
	var parentObj = null;
	var flag = true;
	for(var i=0;i<objArr.length;i++){
		var obj = objArr[i];
		var objId = $(obj).prop("name");
		if(objId != "menu"){
			var isChecked = $(obj).prop("checked");
			if(isChecked!=true){
				flag = false;
				break;
			}
		}else{
			parentObj = obj;
		}
	}
	if(flag == true){
		$(parentObj).prop('checked',true);
	}else{
		$(parentObj).prop('checked',false);
	}
}

//是否所有的子菜单全部选中
function isAllSubMenuChecked(){
	var allSubMenu = $("input[lay-filter='selectSubMenu']");
	var flag = true;
	for(var i=0;i<allSubMenu.length;i++){
		var obj = allSubMenu[i];
		if($(obj).prop("checked") == false){
			flag = false;
		}
	}
	return flag;
}
</script>
</html>